<template>
    <div @click="lockScreen" class="lock-screen-btn-con">
        <Tooltip content="锁屏" placement="bottom">
            <Icon type="locked" :size="20"></Icon>
        </Tooltip>
    </div>
</template>

<script>
    import auth from '@/app/common/auth/auth';
    import Cookies from 'js-cookie';

    const setLockBackSize = () => {
        let x = document.body.clientWidth;
        let y = document.body.clientHeight;
        let r = Math.sqrt(x * x + y * y);
        return parseInt(r);
    };
    export default {
        name: 'lockScreen',
        props: {
            value: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            lockScreen() {
                let lockScreenBack = document.getElementById('lock_screen_back');
                lockScreenBack.style.transition = 'all 3s';
                lockScreenBack.style.zIndex = 10000;
                lockScreenBack.style.boxShadow = '0 0 0 ' + this.lockScreenSize + 'px #667aa6 inset';
                this.showUnlock = true;
                Cookies.set('last_page_name', this.$route.name); // 本地存储锁屏之前打开的页面以便解锁后打开
                auth.setLocking(true);
                setTimeout(() => {
                    lockScreenBack.style.transition = 'all 0s';
                    this.$router.push({
                        name: 'locking'
                    });
                }, 800);
                // Cookies.set('locking', '1');
            }
        },
        mounted() {
            let lockScreenBack;
            if (!document.getElementById('lock_screen_back')) {
                let lockdiv = document.createElement('div');
                lockdiv.setAttribute('id', 'lock_screen_back');
                lockdiv.setAttribute('class', 'lock-screen-back');
                document.body.appendChild(lockdiv);
                lockScreenBack = document.getElementById('lock_screen_back');
                window.addEventListener('resize', () => {
                    let size = setLockBackSize();
                    this.lockScreenSize = size;
                    lockScreenBack.style.transition = 'all 0s';
                    lockScreenBack.style.width = lockScreenBack.style.height = size + 'px';
                });
            } else {
                lockScreenBack = document.getElementById('lock_screen_back');
            }
            let size = setLockBackSize();
            this.lockScreenSize = size;
            lockScreenBack.style.transition = 'all 3s';
            lockScreenBack.style.width = lockScreenBack.style.height = size + 'px';
        }
    };
</script>

